<template>
  <div class="confirm-order">
    <div class="all">
      <p class="left">购买账号</p>
      <p class="right" v-if="info.phone">{{info.phone}}</p>
      <p class="right" v-else>暂无手机号</p>
    </div>
    <div class="all">
      <p class="left">测试人姓名</p>
      <p class="right"><input type="text" v-model="username" placeholder="请填写测试孩子的真实姓名"></p>
    </div>
    <div class="goods-details">
      <p class="details">订单详情</p>
      <div class="cons">
        <p class="title"><span>测试类型：</span> {{(article_type == 0) ? '定制儿童测试' : '定制少年测试'}}  |  一次 </p>
        <p class="info"><span>价格：</span> ¥{{price}}</p>
      </div>
    </div>
    <div class="all">
      <p class="left">商品合计</p>
      <p class="right"><span>￥{{price}}</span></p>
    </div>
    <div class="fixed clear">
      <p class="price">应付： <span>¥{{price}}</span></p>
      <p class="toPay" @click="dopays"><img src="@/assets/weixinzhifu.png" alt="">微信支付</p>
    </div>
  </div>
</template>

<script>
  import { dopay, personCenter } from '@/api/api'
  import { AlertModule } from 'vux'
  import { wexinPay } from '@/config/wxpay'
  export default {
    components: {
    },
    data () {
      return {
        username: '',
        price: '',
        info: {},
      }
    },
    created () {
      this.article_type = this.$route.query.article_type
      this.price = this.$route.query.price
      this.uid = sessionStorage.getItem('uid');
      this.person_center();
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      dopays() {
        if(!this.info.phone){
          AlertModule.show({
            title: '温馨提示',
            content: '前往绑定手机号',
            onHide: () => {
              this.router({path: './bindPhone'})
            }
          })
          return;
        }
        var data = {
          uid: this.uid,
          testname: this.username,
          type: this.article_type
        }
        dopay(data).then((res) => {
          wexinPay(res.data.info.jsapi, (sucRes) => {
            this.router({path: './paySuccess', query: {type: this.article_type}});
          }, (err) => {
            console.dir(err)
          })
        }).catch((err) => {
          console.dir(err)
        })
      },
      person_center() {
        personCenter(this.uid).then((res) => {
          this.info = res.data.info
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.confirm-order
  height 100vh
  background-color #f5f5f5
  .goods-details
    background-color #fff
    padding 1.5rem
    margin-bottom 1rem
    .details
      color #333
      font-size 1.8rem
      line-height 1.8rem
      font-weight bold
      margin-bottom 1.5rem
    .cons
      span
        color #999
      .title
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        font-size 1.5rem
        color #333
      .info
        color #666
        font-size 1.3rem
        margin-top 1rem
        font-weight 500
  .all
    line-height 5rem
    height 5rem
    margin-bottom 1rem
    padding 0 1.6rem
    background-color #fff
    display flex
    .left
      font-size 1.5rem
      color #999
      font-weight 400
      flex 1
    .right
      flex 2
      color #333
      font-size 1.5rem
      text-align right
      position relative
      span
        font-weight bold
        font-size 1.7rem
      input
        display block
        width 100%
        height 5rem
        line-height 5rem
        outline none
        font-size 1.5rem
        text-align right
        color #333
        &::-webkit-input-placeholder
          color #ccc
  .fixed
    position fixed
    bottom 0
    height 5rem
    line-height 5rem
    width calc(100% - 2rem)
    box-shadow 1px 3px 7px rgba(0,0,0,0.2)
    margin 1rem
    border-radius .4rem
    overflow hidden
    .toPay
      width 42%
      background-color #43A047
      color #fff
      font-size 1.8rem
      float left
      box-sizing border-box
      text-align center
      font-weight bold
      img
        display inline-block
        vertical-align middle
        width 2.4rem
        position relative
        top -.1rem
        margin-right .7rem
    .price
      background-color #171C26
      box-sizing border-box
      float left
      padding-left 1.6rem
      color #fff
      font-size 1.6rem
      width 58%
      span
        font-size 1.8rem
        font-weight bold
</style>
